import React, { Component } from 'react'
import {
    MessageContainer,
    InputContainer
} from './StyledChildView'
import Navigation from 'components/Navigation/Navigation'
import back from 'images/nav/whiteback@3x.png'
import m_pic1 from 'images/home/message/m_pic1@2x.png'
import m_pic6 from 'images/home/message/m_pic6@2x.png'
import m_pic7 from 'images/home/message/m_pic7@2x.png'
import m_pic8 from 'images/home/message/m_pic8@2x.png'

import io from 'socket.io-client'
var socket = io('http://localhost:9001');
// var socket = io('http://www.lihonggui.cn');
export default class Message extends Component {
    componentDidMount() {
        socket.on('char message', (value) => {
            let a ={
                type:1,
                value
            }
            this.state.Message.push(a)
            this.setState({
                Message: this.state.Message
            })
        })
    }
    state = {
        Message: []
    }
    render() {
        return (
            <MessageContainer>
                <div className="mInfo">
                    <Navigation
                        title="消息"
                        leftMargin='0 0 0 .15rem'
                        leftWidth='25%'
                        leftHeight='.44rem'
                        titleSize='.17rem'
                        leftImg={back}
                        leftImgWidth='.2rem'
                        clickLeft={() => this.onClickLeft("left")}
                    ></Navigation>

                    <div className="mContent">
 
                        {
                            this.state.Message.map((value,index)=>{
                                return <div key={index} className={value.type==1?'cLeft':'cRight'}>
                                   {
                                       value.type===1? (<><img src={m_pic1} alt="" /><p key={index}>{value.value}}</p></>):(<><p key={index}>{value.value}</p><img src={m_pic1} alt="" /></>)
                                   }</div>
                                })
                        }
                        


                    </div>
                    <InputContainer className="entryContent">
                        <img src={m_pic8} alt="" />
                        <input type="text" name="" className="inpContent" onKeyUp={(e) => this.changeWord(e)} />
                        <img src={m_pic6} alt="" />
                        <img src={m_pic7} alt="" />
                    </InputContainer>
                </div>
            </MessageContainer>

        )
    }
    onClickLeft(tag) {
        this.props.history.go(-1)

    }
    changeWord(e) {
        if (e.keyCode === 13) {
            let a ={
                type:0,
                value:e.target.value
            }
            this.state.Message.push(a)
            this.setState({
                Message: this.state.Message,
            })
            socket.emit('deal message', e.target.value)
            e.target.value=''
        }
    }
}
